/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        error: 'var(--color-error)',
        warning: 'var(--color-warning)',
        success: 'var(--color-success)',
        info: 'var(--color-info)',
        primary: 'var(--color-primary)',

        'gray-1': 'var(--color-gray-1)',
        'gray-2': 'var(--color-gray-2)',
        'gray-3': 'var(--color-gray-3)',
        'gray-4': 'var(--color-gray-4)',
        'gray-5': 'var(--color-gray-5)',
        'gray-6': 'var(--color-gray-6)',
        'gray-7': 'var(--color-gray-7)',
        'gray-8': 'var(--color-gray-8)',
        'gray-9': 'var(--color-gray-9)',
        'gray-10': 'var(--color-gray-10)',

        'primary-bg': 'var(--color-primary-bg)',
        'primary-bg-hover': 'var(--color-primary-bg-hover)',
        'primary-border': 'var(--color-primary-border)',
        'primary-border-hover': 'var(--color-primary-border-hover)',
        'primary-hover': 'var(--color-primary-hover)',
        'primary-active': 'var(--color-primary-active)',
        'primary-text-hover': 'var(--color-primary-text-hover)',
        'primary-text': 'var(--color-primary-text)',
        'primary-text-active': 'var(--color-primary-text-active)',

        'bg-container': 'var(--color-bg-container)',
        bg: 'var(--color-bg)',
        'bg-selected': 'var(--color-bg-selected)',
        'bg-primary-selected': 'var(--color-bg-primary-selected)',
        'item-bg-hover': 'var(--color-item-bg-hover)',
        'item-bg-active': 'var(--color-item-bg-active)',

        text: 'var(--color-text)',
        'text-heading': 'var(--color-text-heading)',
        'text-description': 'var(--color-text-description)',
        'text-placeholder': 'var(--color-text-placeholder)',
        'text-disabled': 'var(--color-text-disabled)',
        'text-light-solid': 'var(--color-text-light-solid)',

        icon: 'var(--color-icon)',
        'icon-secondary': 'var(--color-icon-secondary)',
        'icon-disabled': 'var(--color-icon-disabled)',
        'icon-primary': 'var(--color-icon-primary)',
        'icon-invert': 'var(--color-icon-invert)',

        border: 'var(--color-border)',
        split: 'var(--color-split)',
      },
    },
  },
  plugins: [],
};
